<template>
	<div class="info-content">
		<el-form label-width="80px">
			<el-form-item label="页面标题">
				<el-input v-model="list.title"></el-input>
			</el-form-item>
			<!-- <el-form-item label="页面备注">
				<el-input type="textarea" :rows="4" v-model="list.remarks"></el-input>
			</el-form-item> -->
			<el-form-item label="字体颜色">
				<el-color-picker v-model="list.color"></el-color-picker>
			</el-form-item>

			<el-form-item label="背景颜色">
				<el-color-picker v-model="list.backgroundColor"></el-color-picker>
			</el-form-item>

			<el-button type="primary" class="btn" @click="submit">保存</el-button>
		</el-form>
	</div>
</template>

<script setup lang="ts" name="infoForm">
import { ref, onBeforeMount, watch } from 'vue';
const list = ref({});

const props = defineProps({
	// 列表内容
	data: {
		type: Object,
		default: () => {},
	},
	isRight: {
		type: Boolean,
		default: () => false,
	},
});

onBeforeMount(() => {
	list.value = JSON.parse(JSON.stringify(props.data));
});

const emit = defineEmits(['submit']);

function submit() {
	emit('submit', list.value);
}
</script>

<style lang="scss" scoped>
.info-content {
	padding: 20px;
}

.btn {
	width: 100%;
	margin-top: 30px;
}
</style>
